<script setup>
import {onBeforeUnmount, onMounted, ref} from "vue";
import {ArrowLeft, CaretLeft, CaretRight, Lock, Timer, Unlock, ZoomIn, ZoomOut} from '@element-plus/icons-vue'
//返回首页
import router from "@/router.js";

const backMain = ()=> {
  router.push('/index')
}

//菜单
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";

const previousPage = ()=>{
  router.back()
}
const nextPage = ()=>{
  router.go(1)
}

const tagContent = ref('电脑查询')
const changeTagContent = (content)=>{
  tagContent.value = content
}

//用户接收管理员发送的信息部分
import {useUserStore} from "@/stores/user.js";
const userStore = useUserStore()
const notification = ref(null)
let socket = null
const username = userStore.username
console.log(username)
const connectWebSocket = ()=> {

// 判断当前浏览器是否支持WebSocket， ws对应的地址是远程服务器端的请求路径
  if ('WebSocket' in window) {
    socket = new WebSocket('ws://localhost:8090/notifyToUser'/*?username='+username*/)
    // socket = new WebSocket('ws://localhost:8090/notifications')
  } else {
    console.error("不支持WebSocket");
  }
  // socket = new WebSocket('ws://localhost:8090/notifications')
  socket.onmessage = (event)=>{
    notification.value = event.data
    console.log(notification.value)
    speak(notification.value)
    ElMessage.info("收到管理员通知："+ notification.value)
  }
  socket.onclose = ()=> {
    console.log('WebSocket连接关闭')
    //尝试重新连接
    // setTimeout(() => {
    //   connectWebSocket()
    // }, 5000)
  }
  socket.onerror = (error)=> {
    console.error('WebSocket error:', error)
  }
}
onMounted(()=> {
  connectWebSocket()
})
onBeforeUnmount(()=> {
  if (socket) {
    socket.close()
  }
})
//语音播报
//语言播报
const speak = (text) => {
  if ('speechSynthesis' in window) {
    const msg = new SpeechSynthesisUtterance(text)
    window.speechSynthesis.speak(msg)
  }else {
    alert('您的浏览器不支持语音播报')
  }
}


</script>

<template>
  <div class="topDiv">

    <el-page-header :icon="返回" @back="backMain">
      <template #content>
        <div class="flex items-center">
          <el-avatar
              :size="48"
              class="mr-3"
              src="https://lkpstudy.oss-cn-beijing.aliyuncs.com/%E6%98%9F%E7%97%95.jpg"
          />
          <span class="text-large font-600 mr-3"> 欢迎光临本网咖！ </span>
          <span class="text-sm mr-2" style="color: var(--el-text-color-regular)">
          使用/选择
        </span>
          <el-tag>{{tagContent}}</el-tag>
        </div>
        <div>
          <p v-if="notification">{{ notification }}</p>
        </div>
      </template>
      <template #extra>
        <div class="flex items-center">
          <el-button @click="previousPage"><el-icon><CaretLeft/></el-icon>上一页</el-button>
          <el-button @click="nextPage" type="primary" class="ml-2">下一页<el-icon><CaretRight/></el-icon></el-button>
        </div>
      </template>
    </el-page-header>

    <div class="common-layout">
      <el-container class="el-container-aside">

        <el-aside width="200px" class="myDIYel-aside">
          <el-button type="primary" :icon="ArrowLeft" @click="backMain">返回首页</el-button>
<!--          菜单选择-->
          <el-row class="tac">
            <el-col :span="12">
              <el-menu
                  active-text-color="#ffd04b"
                  background-color="#545c64"
                  class="el-menu-vertical-demo"
                  default-active="0"
                  text-color="#fff"
              >
                <el-menu-item index="1" @click="changeTagContent('电脑查询')">
                  <el-icon><ZoomIn/></el-icon>
                  <router-link to="/board/openComputer">
                    <span>电脑查询</span>
                  </router-link>

                </el-menu-item>
                <el-menu-item index="2" @click="changeTagContent('上机历史')">
                  <el-icon><Timer/></el-icon>
                  <router-link to="/board/useHistory">
                    <span>上机历史</span>
                  </router-link>
                </el-menu-item>
                <el-menu-item index="3" @click="changeTagContent('上机')">
                  <el-icon><Unlock/></el-icon>
                  <router-link to="/board/startUseComputer">
                    <span>上机</span>
                  </router-link>
                </el-menu-item>
                <el-menu-item index="4" @click="changeTagContent('下机')">
                  <el-icon><Lock/></el-icon>
                  <router-link to="/board/closeComputer">
                    <span>下机</span>
                  </router-link>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>

        </el-aside>

        <el-container>
          <router-view></router-view>
        </el-container>
      </el-container>

      <el-footer>
        <span>
          网咖天地 版权所有 © 2024 - 2025 Created by ❤️️️网咖天地开发四人小组
        </span>
        <br/>
        <span>
          --本项目开源于
        <a href="https://gitee.com/wktdstudy/wktd-vue.git" class="footer-a">Gitee仓库</a>
        </span>
      </el-footer>
    </div>
  </div>
</template>

<style scoped>
.topDiv {
  height: 600px;
}
.tac a {
  color: white;
  text-decoration: none;
}
.tac a:hover {
  color: #ffd04b;
}
.tac a.router-link-exact-active {
  color: #ffd04b;
}
.common-layout {
  margin-top: 20px;
}
.el-container-aside {
  /*background-color: green;*/
  height: 590px;
  /*height: 100vh;*/
}
.myDIYel-aside {
  background-color: #545c64;
}

.el-menu-vertical-demo {
  width: 200px;
  border-right: none;
  margin-top: 10px;
}
.el-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #666;
  background-color: #e7e7e7;
  z-index: 10000;
  height: 64px;
}
.footer-a {
  margin: 0;
  padding: 0;
}

</style>